<template>
    <div v-loading="loading">
        <hd-tab :tabs="tabs"/>
        <el-alert type="info" class="mb-3">
            你正在设置「{{ site.title }}」站点的「{{ role.title }}」角色的权限
        </el-alert>
        <el-card
                shadow="nerver"
                class="mb-5 shadow-sm"
                :body-style="{ padding: '20px' }"
                v-for="module in modules"
                :key="module.id"
        >
            <div slot="header">{{ module.title }}</div>
            <div v-for="(permission, index) in module.permissions" :key="index">
                <div
                        class="border-b border-gray-100 mb-3 text-gray-600 text-sm py-3"
                >
                    {{ permission.title }}
                </div>
                <div class="grid grid-cols-4 text-sm">
                    <div
                            v-for="(rule, i) in permission.rules"
                            :key="i"
                            class="py-2"
                    >
                        <el-checkbox-group v-model="form.permissions">
                            <el-checkbox
                                    :label="
                                    `S${site.id}-${module.name}-${rule.name}`
                                "
                            >
                                {{ rule.title }}
                                <el-tag
                                        type="info"
                                        size="mini"
                                        class="opacity-75"
                                >{{ rule.name }}
                                </el-tag
                                >
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
        </el-card>
        <el-button type="primary" size="default" @click="onSubmit"
        >保存提交
        </el-button
        >
        <!-- {{ form.permissions }} -->
    </div>
</template>

<script>
    import tabs from "./tabs";

    export default {
        route: {path: `:sid/permission/:rid/edit`},
        data() {
            return {
                tabs: tabs({
                    sid: this.$route.params.sid,
                    rid: this.$route.params.id
                }),
                modules: [],
                site: {},
                role: {},
                form: {permissions: []},
                loading: true
            };
        },
        async created() {
            this.site = await this.axios.get(`site/${this.$route.params.sid}`);
            this.role = await this.axios.get(
                `site/${this.site.id}/role/${this.$route.params.rid}`
            );
            this.modules = await this.axios.get(`site/${this.site.id}/permission`);

            //保存已经存在的权限
            this.form.permissions = this.role.permissions.map(p => p.name);
            this.loading = false;
        },
        methods: {
            async onSubmit() {
                await this.axios.put(
                    `site/${this.site.id}/role/${this.role.id}/permission`,
                    this.form
                );
                this.router(`site.role.index`, {sid: this.site.id});
            }
        }
    };
</script>

<style></style>
